<template>
	<view class="wrap">
		<view class="nav-wrap" :style="{ background: navbg }">
			<uni-nav-bar statusBar leftIcon="" :title="tabName" color="#1E2124" background-color="rgba(255,255,255,0)"
				:border="false"></uni-nav-bar>
		</view>
		<view class="user-content">
			<image src="/static/commen/user_ bg.png" mode="widthFix" class="top-bg"></image>
			<!-- <uni-status-bar></uni-status-bar>
			<yf-clear-bar></yf-clear-bar> -->
			<view class="user-info">
				<image src="/static/commen/headImg1.png" mode="aspectFill" class="headImg"></image>
				<view class="btn-wrap yf-flex-right">
					<view class="btn-item yf-flex-center">
						<image src="/static/commen/editIcon.png" mode=""></image>
						编辑主页
					</view>
					<view class="btn-item yf-flex-center">
						<image src="/static/commen/loginOut.png" mode=""></image>
						退出
					</view>
				</view>
				<view class="user-name yf-flex-left">
					快乐吃饭 <image src="/static/commen/sex_1.png" mode="" class="sex"></image>
				</view>
				<view class="recommend yf-flex-left">
					<image src="/static/commen/abstract.png" mode="" class="abstract"></image>
					点击添加介绍，让大家认识你...
				</view>
				<view class="applyfor-wrap yf-flex-between">
					<view class="applyfor-text">
						创作申请
					</view>
					<uni-icons type="right" size="14" color="#000000"></uni-icons>
				</view>
			</view>
		</view>
		<view class="" >
			<yf-video-list></yf-video-list>
		</view>
		<!-- 登录弹窗 -->
		<!-- <yf-login-popup ref="login"></yf-login-popup> -->
		<!-- tabbar栏 -->
		<!-- <yf-tabbar fill fixed safeBottom native></yf-tabbar> -->
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		data() {
			return {
				statusBarHeight,
				pharmacists: {}, //药师信息
				navbg: 'rgba(255,255,255,0)', // 导航栏颜色
				tabName: "",
			};
		},
		onLoad() {

		},
		onShow() {
			if (this.hasLogin) {
				if (this.isPower) {
					this.listPharmacist()
				} else if (this.isStorePower) {
					this.listMdPharmacist()
				}
				this.UPDATA_USER_INFO() //更新用户信息
			}
		},
		// 事件监听滚动条
		onPageScroll: function(Object) {
			console.log(Object.scrollTop, "Object.scrollTop")
			const scrollTop = (Object.scrollTop - 150) / 100;
			if (scrollTop > 0.4) {
				this.tabName = 'Acmen';
			} else {
				this.tabName = '';
			}
			this.navbg = 'rgba(255,255,255,' + scrollTop + ')';
		},
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin', 'isPower', 'isStorePower'])
		},
		methods: {
			...mapActions(['UPDATA_USER_INFO']),
			skin(url, param) {
				if (this.$api.checkLogin()) {
					this.$Router.navigateTo(url, param)
				}
			},
			listPharmacist() { //材料审核列表
				this.$apis.listPharmacist({
					userId: this.userInfo.userId
				}).then((res) => {
					if (res.code == 200 && res.data.length > 0) {
						this.pharmacists = res.data[0] //药师信息 
					}
				})
			},
			listMdPharmacist() { //门店材料审核列表
				this.$apis.listMdPharmacist({
					userId: this.userInfo.userId
				}).then((res) => {
					if (res.code == 200 && res.data.length > 0) {
						this.pharmacists = res.data[0] //药师信息 
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8FA;
	}
	.wrap{
		position: relative;
	}
	.nav-wrap {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 22;
		width: 100%;
	}

	.user-content {
		position: relative;
		z-index: 2;

		.top-bg {
			width: 100%;
			height: 312rpx;
			display: block;
		}

		.user-info {
			width: 100%;
			background: #fff;
			padding: 30rpx;
			position: relative;
			z-index: 3;
			margin-top: -40rpx;
			border-radius: 24rpx 24rpx 0rpx 0rpx;

			.headImg {
				width: 180rpx;
				height: 180rpx;
				border: 2rpx solid #FFFFFF;
				border-radius: 50%;
				margin-top: -112rpx;
				display: block;
				background: #fff;
			}

			.btn-wrap {
				position: absolute;
				right: 30rpx;
				top: 30rpx;

				.btn-item {
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 32rpx;
					border: 2rpx solid #E8E8E8;
					padding: 0 30rpx;
					margin-left: 18rpx;
					font-size: 24rpx;
					color: #141E34;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 4rpx;
					}
				}
			}

			.user-name {
				margin-top: 20rpx;
				font-weight: bold;
				font-size: 40rpx;
				color: #1E2124;
				line-height: 56rpx;

				.sex {
					width: 24rpx;
					height: 24rpx;
					margin-left: 4rpx;
				}
			}

			.recommend {
				font-size: 24rpx;
				color: #939393;
				margin-top: 30rpx;

				.abstract {
					width: 24rpx;
					height: 24rpx;
					margin-right: 4rpx;
				}
			}

			.applyfor-wrap {
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 2rpx solid #E8E8E8;
				margin-top: 40rpx;
				padding: 0 30rpx;

				.applyfor-text {
					font-size: 30rpx;
					color: #1E2124;
				}
			}
		}
	}
</style>